<template>
  <div class="hy-form">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="labelWidth">
      <el-row>
        <template v-for="item in formItems" :key="item.label">
            <el-col v-bind="colLayout">
              <el-form-item
              v-if="!item.isHidden"
              :label="item.label"
              :rules="item.rules"
              :style="itemStyle"
              >
              <!--  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleValueChange($event,item.field)" -->
                <template v-if="item.type === 'input' || item.type === 'password'">
                  <el-input :placeholder="item.placeholder"
                  :show-password="item.type === 'password'"
                  v-model="formData[`${item.field}`]"
                  />
                </template>
                <template v-else-if="item.type === 'select'">
                  <el-select :placeholder="item.placeholder" style="width:100%"
                  v-bind="item.otherOptions"
                  v-model="formData[`${item.field}`]"
                  >
                    <el-option v-for="option in item.options"
                    :value="option.title"
                      :key="option.value">
                      {{option.title}}
                      </el-option>
                  </el-select>
                </template>
                <template v-else-if="item.type === 'datepicker'">
                <el-date-picker v-bind="item.otherOptions" style="width:100%"
                v-model="formData[`${item.field}`]"
                ></el-date-picker>
                </template>
              </el-form-item>
            </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent , PropType ,watch , ref} from "vue";
import { IFormItem } from '../types'

export default defineComponent({
  props:{
    modelValue:{
      type:Object,
      required:true
    },
    formItems:{
      type:Array as PropType<IFormItem[]>,
      default:() => []
    },
    labelWidth:{
      type:String,
      default:"100px"
    },
    itemStyle:{
      type:Object,
      default:() => ({padding:'10px 40px'})
    },
    colLayout:{
      type:Object,
      default:() => ({
        xl:6,
        lg:8,
        md:12,
        sm:24,
        xs:24
      })
    }
  },
  emits:['update:modelValue'],
  setup(props,{emit}) {
    //此方法行不通
    // const formData = computed({
    //   get:()=>props.modelValue,
    //   set:(newVal) => {
    //     emit('update:modlValue',newVal)
    //   }
    // })
    const formData = ref({...props.modelValue});
    // watch(
    //   () => props.modelValue,
    //   (newValue) => {
    //     formData.value = { ...newValue }
    //   }
    // )
    watch(
      formData,
      (newVal) => {
        // console.log(newVal)
        emit('update:modelValue',newVal)
      },
      {deep:true}
    )
    const handleValueChange = (value: any,field: string) => {
      emit('update:modelValue',{...props.modelValue,[field]:value})
    }
    const reset = (value: any) => {
      // console.log(formData.value,'1121')
      // console.log(value)
      formData.value = {...value}
      //  for(const item of formData){

      // }
    }
    return {
      formData,
      reset,
      // handleValueChange
    }
  }
})
</script>

<style lang="less" scoped>

</style>
